<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>详情</title>
	<link href="../../css/bootstrap.css" type="text/css" media="screen" rel="stylesheet" />
	<script type="text/javascript" src="../../js/jquery.js"></script>
	<script type="text/javascript" src="../../js/echarts.js"></script>
	<script type="text/javascript" src="./dateRange.js"></script>
		<link rel="stylesheet" type="text/css" href="./dateRange.css"/>
	<style type="text/css">
		body.dashboard{
			background-color: #FBFBFB;
			font-family: 400 1em/1.8 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
		}
		a {
			color: #606266;
			display: block;
			text-decoration: none !important;
		}
		a:hover,a:focus {
			color: #606266;
		}
		ul,li{
			list-style:none;
			padding: 0;
		}
		hr{
			border-top:1px solid #d8d8d8;
		}
		.fs12{
			font-size: 12px;
		}
		.fs14{
			font-size: 14px;
		}
		.fs16{
			font-size: 16px;
		}
		.fs24{
			font-size: 18px;
		}
		.fs18{
			font-size: 18px;
		}
		.fw700{
			font-weight:700;
		}
		.c3{
			color: #606266;
		}
		.c4d{
			color: #4d4d4d;	
		}
		.c9{
			color: #999;
		}
		.c80{
			color: #808080;
		}
		.c926fab{
			color: #926fab;
		}
		.cbe{
			color: #bebebe;
		}
		.c4a90e2{
			color: #4a90e2;
		}
		.mt10{
			margin-top: 10px;
		}
		.mt50{
			margin-top: 50px;
		}
		.mt320{
			margin-top: 30px;
		}
		.mt30{
			margin-top: 20px;
		}
		.body-warp{
			width: 100%;
		}
		.body-content{
			width: 58%;
			margin: 75px auto 10px;
			border: 1px solid #d8d8d8;
			border-radius: 10px;
			background-color: #fff;
			min-width: 980px;
		}
		.mian-width {
			width: 58%;
			margin: 0 auto;
			min-width: 980px;
		}
		.first-page{
			width: 94%;
			margin: 0 auto;
			overflow: hidden;
			padding: 4% 0;
		}
		.first-page-left{
			float: left;
			width: 30%;
			border: 1px solid #d8d8d8;
			text-align: center;
			padding: 20px 0;
			border-radius: 10px;
		}
		.first-page-left img{
			width: 90%;
		}
		.first-page-right{
			float: right;
			width: 60%;
			/*margin-left: 60px;*/
		}
		.left-img-content{
			width: 90%;
			margin: 15px auto;
			text-align: left;
		}
		.first-page-right-top{
			width: 100%;
		}
		.left-company{
			width: 90%;
			float: left;
		}
		.company-logo{
			float: left;
			border-radius: 50%;
			
		}
		.company-logo img{
			width: 70px;
			height: 70px;
			border-radius: 50%;
			border:1px solid #d8d8d8;
			-moz-box-shadow:2px 2px 13px #919191; 
			-webkit-box-shadow:2px 2px 13px #919191;
			box-shadow:2px 2px 13px #919191;
		}
		.company-name{
			width: 80%;
			float: left;
			margin-left: 3%;
		}
		.company-collect{
			width: 30px;
			height: 30px;
			cursor:pointer;
			float: right;
			margin-top: -10%;
		}
		.heat-width{
			display: inline-block;
			width: 124px;
		}
		.main-time,.main-count,.circle-data{
			width: 100%;
		}
		.main-count-li{
			width: 70%;
			overflow: hidden;
		}
		.main-count-li li{
			width: 50%;
			float: left;
			line-height: 30px;
		}
		.circle-data{
			overflow: hidden;
		}
		.circle{
			float: left;
			width: 50%;
		}
		.graph-data{
			width: 94%;
			margin: 0 auto;
		}
		.tendency{
			width: 100%;
			/*padding-bottom: 20px;*/
			overflow: hidden;
		}
		.w45{
			width: 45%;
		}
		.fl-left{
			float:left;
		}
		.fl-right{
			float: right;
		}
		.tendency-img-left{
			width: 100%;
			height: 300px;
			border: 1px solid #D8D8D8;
			border-radius: 5px;
		}
		.tendency-title{
			margin-bottom: 10px;
		}
		.index-button{
			width: 100%;
			overflow: hidden;
		}
		.index-button-a {
			width: 110px;
			text-align: center;
			border:1px solid #4a90e2;
			border-radius: 5px;
			padding: 2px 10px;
			cursor:pointer;
			float: left;
		}
		.index-button-a a{
			display: inline-block;
			color:#4a90e2;
		}
		a.examine-a{
			cursor:pointer;
			color:#4a90e2;
			display: inline;
			margin-left: 5px;
		}
		a.examine-a:hover,a.examine-a:focus {
			color: #4a90e2;
		}
		.clear{
			clear:both;
		} 
		.ml10{
			margin-left: 10px;
		}
		.mt05{
			margin-top: 5%;
		}
		.mb05{
			margin-bottom: 5%;
		}
		.mt2{
			margin-top:5%;
		}
		.navbar-brand{
			padding: 15px 0;
		}
	</style>
</head>
<body class="dashboard">
	<div id="top-nav" class="navbar navbar-xs navbar-inverse navbar-fixed-top">
		<div class="mian-width">
			<div class="navbar-header">
				<a class="navbar-brand" href="index.html"><img src="../../images/icon.png" style="margin-right: 5px" /></a>
			</div>
			<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav pull-right">
					<li class="dropdown g-theme">
						<a class="btn-login" href="javasrcipt:;" id="btnLogin">
							登录
						</a>

					</li>
					<li class="dropdown g-theme">
						<a class="btn-login btn-register" href="javasrcipt:;">
							注册
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="body-warp">
		<div class="body-content">
			<div class="first-page">
				<div class="first-page-left">
					<img src="../../images/1.jpeg"/>
					<div class="left-img-content">
						<!-- <div class="fw700 fs16">Wish</div> -->
						<!-- <div class="c3 fs12">Shopping Made Fun. Join over 30 million others that have made their shopping more smart, fun, and rewarding.</div> -->
						<div class="index-button">
							<div class="mt10 index-button-a">
								<a>链接</a>
							</div>
							<div class="mt10 index-button-a ml10">
								<a href="../../images/1.jpeg"  download="../../images/1.jpeg">下载</a>
							</div>
						</div>
						
					</div>
				</div>
				<div class="first-page-right">
					<div class="first-page-right-top">
						<div class="left-company">
							<div class="company-logo">
								<img src="../../images/logo.png"/>
							</div>
							
							<div class="company-name">
								<div class="company-name-title fs24 fw700 c4d">广东原昇信息科技有限公司</div>
								<div class="fs14 c4d mt10 c9">
									<span>一家网络公司打</span>
									<a class="examine-a">查看全部</a>
									
								</div>
							</div>
							<img src="../../images/x1.png" class="company-collect"/>
						</div>

						<div class="left-company mt320">
							<div class="fs14 c4d mt10">一家网络公司打发打发供热个人个人拖后腿发额发额发色发泛发大水发的说法发额发发额发额非阿尔法而非额而非啊发额发艾尔无法仍无法安慰</div>
							<div class="mt320">
								<span class="heat-width">
									<img src="../../images/1.png"/>
									<span class="cbe">10</span>
								</span>
								<span class="heat-width">
									<img src="../../images/2.png"/>
									<span class="cbe">100</span>
								</span>
								<span class="heat-width">
									<img src="../../images/3.png"/>
									<span class="cbe">100</span>
								</span>
							</div>
							
						</div>
					</div>
					<div class="clear"></div> 
					<hr class="mt05 mb05"/>
					<div class="main-time fs14">
						<div class="mt30">
							<label class="c4d">时间：</label>
							<span class="c80">2018-10-24~2018-10-25</span>
						</div>
						<div class="mt30">
							<label class="c4d">广告投放：</label>
							<span class="c80">Mobile</span>
						</div>
						<div class="mt30">
							<label class="c4d">目标：</label>
							<span class="c80">Comming Soon</span>
						</div>
					</div>
					<hr class="mt05 mb05"/>
					<div class="main-count">
						<ul class="main-count-li fs14">
							<li>
								<label class="c4d">发现次数:</label>
								<span class="c80" style="margin-left: 15px;">120</span>
							</li>
							<li>
								<label class="c4d">发现次数:</label>
								<span class="c80" style="margin-left: 15px;">1220</span>
							</li>
							<li>
								<label class="c4d">发现次数:</label>
								<span class="c80" style="margin-left: 15px;">120</span>
							</li>
							<li>
								<label class="c4d">发现次数:</label>
								<span class="c80" style="margin-left: 15px;">1220</span>
							</li>
						</ul>
					</div>
					<hr class="mt05 mb05"/>
					<div class="circle-data">
						<div class="circle">
							<div id="circles-1" style="width: 200px;height:120px;"></div>
						</div>
						<div class="circle">
							<div id="circles-2" style="width: 200px;height:120px;"></div>
						</div>
					</div>
				</div>
				
			</div>
			<div class="graph-data">
				<hr class="mt2"/>
				<div class="tendency">
					<style type="text/css">
						.advertising-title{
							color: #3389bf;
							margin-top: 15px;
							font-size: 16px;
						}
						table.out-table, table.out-table th, table.out-table td{border: 1px solid #dcdfe6;text-align: center;color: #606266;font-weight: normal;}
						table.out-table th, table.out-table td{
							height: 30px;
						}
						table.out-table{
							width: 100%;margin: 20px auto 10px;border-collapse:inherit;border-radius: 5px;
						}
						.out{
							background: url(../../images/slash.png) no-repeat;
							background-size: auto 100%;
							position:relative;
						}
						b{
							font-style:normal;
							display:block;
							position:absolute;
							top:11px;
							left:0;
							width:35px;
							font-size: 12px;
							font-weight: normal;
						}
						em{
							font-style:normal;
							display:block;
							position:absolute;
							top:3px;
							left:62px;
							width:55px;
							font-size: 12px;
						}      
						.outer-div{
							margin: 10px auto;
						}
						.tiem-warp{
							margin: 15px auto;
						}
						.tiem-scope{
							color: #606266;
							font-size: 14px;
						}
						.advertising-announce-tiem{
							border: 1px solid #dcdfe6;
							width: 220px;
							height: 40px;
							line-height: 40px;
							border-radius: 5px;
							text-align: center;
							font-size: 14px;
							color: #606266;
							cursor:pointer;
						}
						.bg-link{
							background: url(../../images/bg_lin.png) no-repeat;
							background-size: auto;
						}
					</style>
					<div>
						<div class="advertising-title">广告投放日程表</div>
						<div class="tiem-warp">
							<div class="tiem-scope">时间范围</div>
							<div class="outer-div">
								<a id="date3" class="advertising-announce-tiem">
									广告发布时间
								</a>
								<a class="opt_sel" id="input_trigger3">
					                <i class="i_orderd"></i>
					            </a>
								
							<div>
						</div>
						<table class="out-table">
							<tr>
								<th style="position: relative;" class="out">
									<b>类别</b>
									<em>姓名</em>
								</th>
								<th>2</th>
								<th>3</th>
								<th>4</th>
								<th>5</th>
								<th>6</th>
								<th>7</th>
								<th>8</th>
								<th>9</th>
								<th>10</th>
								<th>11</th>
								<th>12</th>
								<th>13</th>
								<th>14</th>
								<th>15</th>
								<th>16</th>
								<th>17</th>
								<th>18</th>
								<th>19</th>
								<th>20</th>
								<th>21</th>
								<th>22</th>
								<th>23</th>
								<th>24</th>
							</tr>
							<tr>
								<td>10.07</td>
								<td class="bg-link">-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
							</tr>
							<tr>
								<td>10.07</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
							</tr>
							<tr>
								<td>10.07</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
							</tr>
							<tr>
								<td>10.07</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
							</tr>
							<tr>
								<td>10.07</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
							</tr>
							<tr>
								<td>10.07</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
							</tr>
							<tr>
								<td>10.07</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
							</tr>
							
						</table>
					</div>
					<script type="text/javascript">
						var dateRange1 = new pickerDateRange('date3', {
							isTodayValid : true,
							startDate : '广告发布时间',
							endDate : '',
							needCompare : false,
							defaultText : ' ~ ',
							autoSubmit : true,
							inputTrigger : 'input_trigger3',
							theme : 'ta',
							success : function(obj) {
		//						$("#dCon2").html('开始时间 : ' + obj.startDate + '<br/>结束时间 : ' + obj.endDate);
								$("#date3").html("aaa")
								$(".out-table tr").children("td:first-child").text();
								console.log($(".out-table").find("tr").eq(5).children("td").eq(0).text("aa"));
								
							}
						});
					</script>
					<style type="text/css">
						.interest-distribution{
							width: 100%;
						}
						.interest-distribution-title{
							font-size: 22px;
							font-weight: 700;
							text-align: center;
							margin: 75px auto 0;
						}
						.pillar-parent{
							width: 100%;
							overflow: hidden;
							margin: 30px auto;
						}
						.pillar-img{
							width: 49%;
							height: 400px;
							float: left;
							
						}
						.pillar-img-border{
							border: 1px solid #d8d8d8;
						}
						.territory-data{
							width: 49%;
							height: 400px;
							float: right;
						}
						.roundness-data{
							width: 100%;
							height: 400px;
						}
						#territoryData,#pillarImg{
							width: 100%;
							height: 90%;
						}
						.pillar-territory-title{
							height: 10%;
							/*text-align: center;*/
							/*line-height: 10%*/
						}
						.pillar-img-height{
							height: 500px;
						}
					</style>
					<div class="interest-distribution">
						<!--<div class="interest-distribution-title">兴趣分类分布</div>-->
						<div class="pillar-parent">
							
							<div  class="pillar-img">
								 <div class="pillar-territory-title fs14">兴趣分类分布</div> 
								<div id="pillarImg" class="pillar-img-border"></div>
							</div>
							<div class="territory-data">
								 <div class="pillar-territory-title fs14">兴趣分类分布</div> 
								<div id="territoryData" class="pillar-img-border"></div>
							</div>
						
						</div>
						<div class="pillar-parent">
							
							<div  class="pillar-img pillar-img-height">
								<div class="pillar-territory-title fs14">年龄分布</div> 
								<div class="roundness-data pillar-img-border" id="roundnessData"></div>
							</div>
							<div class="territory-data pillar-img-height">
								<div class="pillar-territory-title fs14"><!--年龄分布--></div> 
								<div class="roundness-data pillar-img-border fs24" style="background-color: rgba(0, 0, 0, 0.3);text-align: center;line-height: 400px;color: #fff;">
									正在开发中。。。
								</div>
							</div>
						
						</div>
						
					</div>
					<script type="text/javascript">
						pillarImg();
						territoryData();
						roundnessData();
						function pillarImg(){
							option = {
						    color: ['#3398DB'],
						    tooltip : {
						        trigger: 'axis',
						        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
						            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						        }
						    },
						    grid: {
						        left: '3%',
						        right: '4%',
						        bottom: '3%',
						        containLabel: true
						    },
						    xAxis : [
						        {
						            type : 'category',
						            data : ['百货', '百货', '百货', '百货', '百货', '百货', '百货百货','百货', '百货', '百货', '百货', '百货', '百货', '百货百货'],
						            axisTick: {
						                alignWithLabel: true
						            }
						        }
						    ],
						    yAxis : [
						        {
						            type : 'value'
						        }
						    ],
						    series : [
						        {
						            name:'直接访问',
						            type:'bar',
						            barWidth: '60%',
						            data:[10, 52, 200, 334, 390, 330, 220,10, 52, 200, 334, 390, 330, 220]
						        }
						    ]
						};
						var myChart = echarts.init(document.getElementById('pillarImg'));
							    //使用刚指定的配置项和数据显示图表。
							    myChart.setOption(option);
						}
					function territoryData(){
						option = {
						    color: ['#26ccbd'],
						    tooltip : {
						        trigger: 'axis',
						        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
						            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						        }
						    },
						    grid: {
						        left: '3%',
						        right: '4%',
						        bottom: '3%',
						        containLabel: true
						    },
						    xAxis : [
						        {
						            type : 'category',
						            data : ['北京', '上海', '广州', '深圳', '珠海', '中山', '香港'],
						            axisTick: {
						                alignWithLabel: true
						            }
						        }
						    ],
						    yAxis : [
						        {
						            type : 'value'
						        }
						    ],
						    series : [
						        {
						            name:'直接访问',
						            type:'bar',
						            barWidth: '60%',
						            data:[10, 52, 200, 334, 390, 330, 220]
						        }
						    ]
						};
						var myChart = echarts.init(document.getElementById('territoryData'));
							    //使用刚指定的配置项和数据显示图表。
							    myChart.setOption(option);
					}
					function roundnessData(){
						

						var weatherIcons = {
						    'Sunny': './data/asset/img/weather/sunny_128.png',
						    'Cloudy': './data/asset/img/weather/cloudy_128.png',
						    'Showers': './data/asset/img/weather/showers_128.png'
						};
						
						option = {
						    title: {
//						        text: '年龄分布',
						        subtext: '',
						        left: 'center'
						    },
						    tooltip : {
						        trigger: 'item',
						        formatter: "{a} <br/>{b} : {c} ({d}%)"
						    },
						    legend: {
						        // orient: 'vertical',
						        // top: 'middle',
						        bottom: 10,
						        left: 'center',
						        data: ['0-18岁', '18-23岁','24-30岁','31-40岁','43-50岁','50岁以上']
						    },
						    series : [
						        {
						            type: 'pie',
						            radius : '65%',
						            center: ['50%', '50%'],
						            selectedMode: 'single',
						            data:[
						                {
						                    value:1548,
						                    name: '0-18岁',
						                    label: {
						                        normal: {
						                            backgroundColor: '#eee',
						                            borderColor: '#777',
						                            borderRadius: 4,
						                            rich: {
						                                title: {
						                                    color: '#eee',
						                                    align: 'center'
						                                },
						                                abg: {
						                                    backgroundColor: '#333',
						                                    width: '100%',
						                                    align: 'right',
						                                    height: 25,
						                                    borderRadius: [4, 4, 0, 0]
						                                },
						                                Sunny: {
						                                    height: 30,
						                                    align: 'left',
						                                    
						                                },
						                                Cloudy: {
						                                    height: 30,
						                                    align: 'left',
						                                    
						                                },
						                                Showers: {
						                                    height: 30,
						                                    align: 'left',
						                                    
						                                },
						                                weatherHead: {
						                                    color: '#333',
						                                    height: 24,
						                                    align: 'left'
						                                },
						                                hr: {
						                                    borderColor: '#777',
						                                    width: '100%',
						                                    borderWidth: 0.5,
						                                    height: 0
						                                },
						                                value: {
						                                    width: 20,
						                                    padding: [0, 20, 0, 30],
						                                    align: 'left'
						                                },
						                                valueHead: {
						                                    color: '#333',
						                                    width: 20,
						                                    padding: [0, 20, 0, 30],
						                                    align: 'center'
						                                },
						                                rate: {
						                                    width: 40,
						                                    align: 'right',
						                                    padding: [0, 10, 0, 0]
						                                },
						                                rateHead: {
						                                    color: '#333',
						                                    width: 40,
						                                    align: 'center',
						                                    padding: [0, 10, 0, 0]
						                                }
						                            }
						                        }
						                    }
						                },
						                {value:510, name: '18-23岁',itemStyle: {color: '#ee66f8'}},
						                {value:634, name: '24-30岁',itemStyle: {color: '#8bffa6'}},
						                {value:735, name: '31-40岁',itemStyle: {color: '#f4e4a5'}},
						                {value:735, name: '43-50岁',itemStyle: {color: '#ff9fb9'}},
						                {value:735, name: '50岁以上',itemStyle: {color: '#ab6df9'}}
						            ],
						            itemStyle: {
						            	color: '#77bcfa',
						                emphasis: {
						                    shadowBlur: 10,
						                    shadowOffsetX: 0,
						                    shadowColor: 'rgba(0, 0, 0, 0.5)'
						                }
						            }
						        }
						    ]
						};

						var myChart = echarts.init(document.getElementById('roundnessData'));
							    //使用刚指定的配置项和数据显示图表。
							    myChart.setOption(option);
					}
					</script>
					
					<!--<div class="fl-left w45">
						
						<div class="tendency-title">趋势图</div>
						
							<div class="tendency-img-left" id="tendencyImgLeft"></div>
						
						
					</div>
					<div class="fl-right w45">
						<div class="tendency-title">趋势图</div>
						<div class="tendency-img-left" id="tendencyImgRight"></div>
					</div>-->
				</div>
			</div>
			
		</div>
	</div>
</body>

<script type="text/javascript">
$(function(){
	
	    
	    circles1();
	    
	    circles2();
	    
//	   tendencyImgLeft();
//	   tendencyImgRight();
})

function circles1(){
	var option = {
        backgroundColor:"",
        color:"#36a6e5",
        title: {
            text: '',
            top:'3%',
            left:'1%',
            textStyle:{
                color: '#333',
                fontStyle: 'normal',
                fontWeight: 'normal',
                fontFamily: 'sans-serif',
                fontSize: 14,
            }
        },
        series: [{
            name: '来源',
            type: 'pie',
            radius: ['60%', '75%'],
            avoidLabelOverlap: false,
            hoverAnimation:false,
            label: {
                normal: {
                    show: false,
                    position: 'center',
                    textStyle: {
                        fontSize: 14,
                        color: '#333'
                    },
                    formatter:'{b}\n{c}%'
                }
            },
            data: [{
                    value: 20,
                    name: '发现率',
                    label:{
                        normal:{
                            show:true
                        }
                    }
                 },
                {
                    value: 100-20,
                    name: ''
                }
            ]
        }]
    };

	    var myChart = echarts.init(document.getElementById('circles-1'));
	    //使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
}
function circles2(){
	var optiona = {
        backgroundColor:"",
        color:"#49dfff",
        title: {
            text: '',
            top:'3%',
            left:'1%',
            textStyle:{
                color: '#333',
                fontStyle: 'normal',
                fontWeight: 'normal',
                fontFamily: 'sans-serif',
                fontSize: 14,
            }
        },
        series: [{
            name: '来源',
            type: 'pie',
            radius: ['60%', '75%'],
            avoidLabelOverlap: false,
            hoverAnimation:false,
            label: {
                normal: {
                    show: false,
                    position: 'center',
                    textStyle: {
                        fontSize: 14,
                        color: '#333'
                    },
                    formatter:'{b}\n{c}%'
                }
            },
            data: [{
                    value: 30,
                    name: '展现率',
                    label:{
                        normal:{
                            show:true
                        }
                    }
                 },
                {
                    value: 100-20,
                    name: ''
                }
            ]
        }]
    };

	    var myChart = echarts.init(document.getElementById('circles-2'));
	    //使用刚指定的配置项和数据显示图表。
	    myChart.setOption(optiona);
}
	
function tendencyImgLeft(){
	var option = {
	    xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	    },
	    yAxis: {
	        type: 'value'
	    },
	    color: 'rgba(124,181,236,0.75)',
	    series: [{
	        data: [820, 932, 901, 934, 1290, 1330, 1320],
	        type: 'line',
	        areaStyle: {},
	        itemStyle :{
	        	normal :{
	        		lineStyle:{
	        			color:"rgba(124,181,236,0.75)"
	        		}
	        	}
	        }
	    }]
	};
	var myChart = echarts.init(document.getElementById('tendencyImgLeft'));
	    //使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
}
function tendencyImgRight(){
	var option = {
	    xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	    },
	    yAxis: {
	        type: 'value'
	    },
	    color: 'rgba(124,181,236,0.75)',
	    series: [{
	        data: [820, 932, 901, 934, 1290, 1330, 1320],
	        type: 'line',
	        areaStyle: {},
	        itemStyle :{
	        	normal :{
	        		lineStyle:{
	        			color:"rgba(124,181,236,0.75)"
	        		}
	        	}
	        }
	    }]
	};
	var myChart = echarts.init(document.getElementById('tendencyImgRight'));
	    //使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
}
</script>
</html>